<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="博客,技术,PHP,Mysql,Html,Css,Ajax,服务器,Js,数据库,网站,微信公众号,小程序" />
    <meta name="description" content="Alinejun - 个人技术博客，专注码农的世界" />
    <title>Alinejun - 个人技术博客</title>
    <link rel="icon" href="__IMG__/favicon.ico">
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="__STATIC__/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/head.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/base.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/index.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/iconfont.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/timeline/jquery.eeyellow.Timeline.css" />
    <style>
        @media (max-width: 769px){
            .main-note .detail{
                padding: 20px 0px !important;
            }
        }
    </style>
</head>
<body>
    <!-- head -->
    <div class="container-fluid" style="padding: 0px">
        <div class="header">
            <!-- header -->
            {:widget('Common/header')}
            <!-- /header -->

            <!-- category -->
            {:widget('Common/category')}
            <!-- /category -->
        </div>
    </div>
    <!-- head -->

	<!-- itemGrid for hot -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-md-9 box-left">

                <!-- itemBox 头条 -->
                <div class="main-note cont-box" style="padding:0px 20px;margin: 0px;">
                    <div class="title">
                        <h1>杂记 / Note</h1>
                        <p>业精于勤，荒于嬉；行出成于出，毁于随</p>
                    </div>
                    <div class="line"></div>
                    <div class="detail">

                        <div class="VivaTimeline">
                            <dl>
                                {volist name="data" id="vo"}
                                    <dt>{$vo.month}</dt>
                                    {volist name="vo.list" id="va" key="j"}
                                    <dd class="pos-<?php echo ($j%2 == 1)? 'left': 'right';?> clearfix">
                                        <div class="circ"></div>
                                        <div class="time">{$va.date_time}</div>
                                        <div class="events">
                                            <div class="events-header">{$va.title}</div>
                                            <div class="events-body">
                                                <div class="row">
                                                    <div class="events-desc" style="line-height: 1.5em">{$va.content|raw}</div>
                                                </div>
                                            </div>
                                            <div class="events-footer">{$va.create_time}</div>
                                        </div>
                                    </dd>
                                    {/volist}
                                {/volist}
                                <dt>May-2018</dt>
                                <dt>Dec-2017</dt>
                                <dt>Jue-2017</dt>
                            </dl>
                        </div>

                    </div>
                    <div class="foot">
                        <p class="thend"><span>-</span><b>THE END</b><span>-</span></p>
                    </div>                   
                </div>                    
                <!-- itemBox 头条 -->
            </div>
            <div class="col-sm-4 col-md-3 box-right">
                <!-- news -->
                {:widget('Common/news')}
                <!-- /news -->

                <!-- labels -->
                {:widget('Common/labels')}
                <!-- /labels -->

                <!-- comment -->
                {:widget('Common/comment')}
                <!-- /comment -->                  
            </div>

            <div class="clearfix"></div>
        </div>
    </div>
    
    <!-- footer -->
    {:widget('Common/footer')}
    <!-- /footer -->

    <script type="text/javascript" src="__JS__/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/jquery.ripples.js"></script>
    <script type="text/javascript" src="__JS__/base.js"></script>
    <script type="text/javascript" src="__STATIC__/timeline/jquery.eeyellow.Timeline.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.VivaTimeline').vivaTimeline({
                carousel: true,
                carouselTime: 3000
            });
        });
    </script>
</body>
</html>